/* 状态动画点 */
.online {
    background:green;
    position: relative;
    right: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    -webkit-animation: twinkling 1.3s infinite ease-in-out;
    animation: twinkling 1.3s infinite ease-in-out;
}
.offoline{
    background:#909190;
    position: relative;
    right: 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}
.restart{
    background:#D3AE1A;
    position: relative;
    right: 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    -webkit-animation: twinkling 1.3s infinite ease-in-out;
    animation: twinkling 1.3s infinite ease-in-out;
}
@-webkit-keyframes twinkling {
    0% {
        opacity: 0.5;
        filter: alpha(opacity=20);
        -webkit-transform: scale(1);
    }
    50% {
        opacity: 0.75;
        filter: alpha(opacity=50);
        -webkit-transform: scale(1.12);
    }
    100% {
        opacity: 1;
        filter: alpha(opacity=20);
        -webkit-transform: scale(1);
    }
}

@keyframes twinkling {
    0% {
        opacity: 0.5;
        filter: alpha(opacity=20);
        -webkit-transform: scale(1);
    }
    50% {
        opacity: 0.75;
        filter: alpha(opacity=50);
        -webkit-transform: scale(1.12);
    }
    100% {
        opacity: 1;
        filter: alpha(opacity=20);
        -webkit-transform: scale(1);
    }
}